import React, { useState } from 'react';
import MyTitle from '../../../component/System settings/MyTitle'
import MySearch from '../../../component/System settings/MySearch'
import MyTabble from '../../../component/System settings/MyTabble'
import MyFormbox from '../../../component/System settings/MyFormbox'
import { Space, Button, Modal, Switch } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
interface Props {

}

interface DataType {
    key: string;
    user: string;
    role: string;
    phone: number;
    name: string;
    switch: boolean;
}


function Professionaltitle(props: Props) {
    let [record, setRecord] = useState({})
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 保存rowkey的值
    let [rowkey, setRowkey] = useState([])
    let navigate = useNavigate()
    // 定义新增方法
    let handleAdd = () => {
        console.log('新增了')
        navigate('/index/systemsettings/addadmin')

    }
    // 定义每行数据
    const data = [
        {
            "id": 1,
            "key": 1,
            "postname": "主任医师",
            "money": 70.00,
            "posttext": "职称描述职称描述",
            "time": "2022/11/4 21:28"
        },
        {
            "id": 2,
            "key": 2,
            "postname": "普通医师",
            "money": 60.00,
            "posttext": "职称描述职称描述",
            "time": "2022/11/4 21:9"
        },
        {
            "id": 3,
            "key": 3,
            "postname": "专家医师",
            "money": 160.00,
            "posttext": "职称描述职称描述",
            "time": "2020/09/08 10: 06"
        },
        {
            "id": 4,
            "key": 4,
            "postname": "实习医师",
            "money": 60.00,
            "posttext": "职称描述职称描述",
            "time": "2020/09/08 10: 06"
        },
        {
            "id": 5,
            "key": 5,
            "postname": "中级医师",
            "money": 60.00,
            "posttext": "职称描述职称描述",
            "time": "2022/11/4 15:41",
        },
        {
            "id": 6,
            "key": 6,
            "postname": "高级护士",
            "money": 80.00,
            "posttext": "职称描述职称描述",
            "time": "2022/11/4 15:59",
        }
    ]

    // 定义有几列
    const columns: ColumnsType<DataType> = [
        {
            title: '职称名称',
            dataIndex: 'postname',
            key: 'postname',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '默认挂号费（元）',
            dataIndex: 'money',
            key: 'money',
        },
        {
            title: '职称描述',
            dataIndex: 'posttext',
            key: 'posttext',
        },
        {
            title: '是否启用',
            key: 'switch',
            dataIndex: 'switch',
            render: () => (
                <>
                    <Switch defaultChecked />
                </>
            ),
        },
        {
            title: '添加时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => showModal(record)}><FormOutlined /></a>
                    <a onClick={() => handle_oneDelete(record)}><DeleteOutlined /></a>
                </Space>
            ),
        },
    ];

    // 定义删除
    let handle_oneDelete = (record: any) => {
        console.log("删除了")
    }

    // 定义弹出框
    const showModal = (record: any) => {
        console.log('showModal出发了')
        setIsModalOpen(true);
        // 保存record值
        setRecord(record)
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };

    // 拿到选择框数据
    let selectrowKey = (rowkey: any) => {
        console.log('父组件拿到子组件的key了', rowkey)
        // 保存已选数据
        setRowkey(rowkey)
    }

    // 搜索
    let handleSearch = () => {
        console.log("搜索了")
    }



    return (
        <div>
            <MyTitle title={'职称管理'}>
                {/*给子组件传入这两个按钮 */}
                <Button >删除</Button>
                <Button type="primary" onClick={handleAdd}>新增职称</Button>
            </MyTitle>

            {/* <MySearch /> */}
            <MyTabble columns={columns} selectrowKey={selectrowKey} managerList={data}>
                {/*给子组件传入自定义搜索组件 */}
                <MySearch handleSearch={handleSearch} />
            </MyTabble>
        </div>
    );
}

export default Professionaltitle;